<template>
  <section class="article-content">
    <!-- 加载状态 -->
    <div v-if="loading" class="loading-container">
      <p>加载中...</p>
    </div>

    <!-- 错误状态 -->
    <div v-else-if="error" class="error-container">
      <p>加载失败，请稍后重试</p>
      <button @click="fetchArticleDetail">重新加载</button>
    </div>

    <!-- 文章内容（数据加载成功后显示） -->
    <div v-else>
      <!-- 文章头部信息 -->
      <div class="article-header">
        <h1 class="article-title">
          <TextGenerateEffect :words="article.title" class="" />
        </h1>
        <div class="meta-info">
          <span>发布时间：{{ article.create_time }}</span>
          <span>浏览次数：{{ article.read_num }}</span>
        </div>
      </div>

      <!-- 封面图 -->
      <div v-motion-fade-visible class="article-banner">
        <!--        <img :src="article.pic" alt="文章封面" class="banner-img" />-->
      </div>

      <!-- 正文内容（富文本渲染） -->
      <!-- eslint-disable-next-line vue/no-v-html -->
      <div class="article-body" v-html="article.content"></div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import request from '@/utils/request' // 假设已有封装的axios实例
import TextGenerateEffect from '@/components/TextGenerateEffect.vue'

// 路由参数获取（从URL中提取:plat和:id）
const route = useRoute()
// const plat = route.params.plat as string // 平台标识（如"default"）
const articleId = route.params.id as string // 文章ID

// 响应式数据
const loading = ref(true) // 加载状态
const error = ref(false) // 错误状态
const article = ref({
  title: '', // 文章标题
  create_time: '', // 发布时间（格式：YYYY-MM-DD）
  read_num: 0, // 浏览次数
  pic: '', // 封面图URL
  content: '' // 正文内容（HTML格式）
})
const TinyMceFormatFn = (data: any) => {
  if (!data) return ''
  // 1. 移除 img 标签中的 width/height 属性（保留 style 和其他属性）
  // 原代码中处理图片的正则替换部分
  data = data.replace(/<img([^>]*)>/gi, (_: any, attrs: any) => {
    // 用 _ 代替 match
    // 移除 width 和 height 属性
    attrs = attrs.replace(/\s*width\s*=\s*["'][^"']*["']/gi, '')
    attrs = attrs.replace(/\s*height\s*=\s*["'][^"']*["']/gi, '')
    // 移除 align 属性（避免图片靠右）
    attrs = attrs.replace(/\s*align\s*=\s*["'](left|right|center)["']/gi, '')
    // 处理原有的 style 属性
    const newStyle = 'max-width:100%;height:auto;display: block;margin:16px 0;'
    if (attrs.match(/\s*style\s*=\s*["']/i)) {
      // 用 _ 代替 m（第二个未使用的参数）
      attrs = attrs.replace(/\s*style\s*=\s*["']([^"']*)["']/i, (_: any, existingStyle: any) => {
        return ` style="${existingStyle}${newStyle}"`
      })
    } else {
      attrs = ` style="${newStyle}"${attrs}`
    }
    return `<img${attrs}>`
  })
  // 2. 处理 video 标签（保持原有逻辑）
  data = data.replace(/<video([^>]*)>/gi, '<video style="max-width:100%;height:auto;display: block;"$1>')
  return data
}
// 从接口获取文章详情
const fetchArticleDetail = async () => {
  loading.value = true
  error.value = false
  try {
    // 接口请求（拼接plat和id参数）
    const res = await request.get(`/go/api/:plat/v1/article/${articleId}/detail`)

    // 假设接口返回格式：{ code: 0, data: { title, publishTime, views, cover, content } }
    if (res.code === 0 && res.data) {
      const data = res.data
      // 赋值到响应式变量
      article.value = data
      data.content = TinyMceFormatFn(data.content)
    } else {
      throw new Error(res.message || '获取文章详情失败')
    }
  } catch (err: any) {
    console.error('文章详情请求失败：', err)
    error.value = true
    ElMessage.error(err.message || '加载失败，请重试')
  } finally {
    loading.value = false
  }
}

// 页面挂载时请求数据
onMounted(() => {
  fetchArticleDetail()
})
</script>

<style scoped lang="less">
.article-content {
  padding: 200px 192px 100px;
  margin: 0 auto;
  background: #fff;
  text-align: left;
  max-width: 1920px;

  // 加载状态样式
  .loading-container {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: @text-color-secondary;
  }

  // 错误状态样式
  .error-container {
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: #f56c6c;

    button {
      padding: 6px 16px;
      border: 1px solid @primary-color;
      color: @primary-color;
      background: transparent;
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: @primary-color;
        color: #fff;
      }
    }
  }

  // 文章头部
  .article-header {
    padding-bottom: 30px;
    border-bottom: 0.3px solid #b5b5b5;

    .article-title {
      font-size: 32px;
      font-weight: 400;
      color: @text-color;
      margin-bottom: 10px;
      line-height: 1.5;
    }

    .meta-info {
      font-size: 18px;
      color: @text-color-secondary;
      span {
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
      }
    }
  }

  // 封面图
  .article-banner {
    margin: 30px 0;

    .banner-img {
      width: 100%;
      height: auto;
      border-radius: 8px;
      object-fit: cover;
    }
  }

  // 正文内容（富文本样式适配）
  .article-body {
    //font-weight: 400;
    //line-height: 35px;
    :deep(p) {
      font-size: 16px;
      color: #666;
      line-height: 1.2;
      margin-bottom: 24px;
      text-indent: 2em;
      :deep img {
        margin: auto;
      }
    }

    // 适配富文本中的图片
    :deep(img) {
      max-width: 100%;
      height: auto;
      display: block !important;
    }

    // 适配富文本中的标题
    h2,
    h3 {
      //margin: 24px 0 16px;
      color: @text-color;
    }
  }

  // 响应式适配
  @media (max-width: 768px) {
    padding: 40px 20px;
    .article-body {
      :deep(p) {
        font-size: 16px;
        color: #666;
        line-height: 1.8;
        margin-bottom: 24px;
        text-indent: 2em;
        :deep img {
          margin: auto;
        }
      }

      // 适配富文本中的图片
      :deep img {
        max-width: 100%; // 图片宽度自适应
        height: auto;
        display: block !important;
      }

      // 适配富文本中的标题
      h2,
      h3 {
        margin: 24px 0 16px;
        color: @text-color;
      }
    }
    .article-header {
      .article-title {
        font-size: 24px;
      }
      .meta-info {
        font-size: 14px;
        flex-wrap: wrap;
        gap: 8px 20px;
      }
    }

    .article-body {
      p {
        text-indent: 0;
        font-size: 15px;
      }
    }
  }
}
</style>
